<script lang="ts">
    import {ButtonGroupInterface} from "@/uni_modules/u-button-group/components/u-button-group/types";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import UButton from "@/uni_modules/u-button/components/u-button/u-button.vue";

    export default {
        name: "u-button-group",
        // 组件
        components: {UButton},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: [],
        // 数据
        data()
        {
            return {
                groups: <ButtonGroupInterface[]>[] // 按钮数据
            };
        },
        // 监听器
        watch: {
            // 监听按钮数据
            data: {
                handler(value: ButtonGroupInterface[])
                {
                    // 当前的按钮数据
                    const groups: ButtonGroupInterface[] = [];

                    value.forEach((item: ButtonGroupInterface, index: number) =>
                    {
                        // 是否显示
                        if (item.show == null || isBoolean(item.show) && item.show)
                        {
                            // 添加到集群中
                            groups.push(item);
                        }
                        else if (isFunction(item.show))
                        {
                            // 当前的返回结果
                            const result = item.show.apply(item, [{data: item, index}]);

                            // 没有返回或则返回为true，则添加到集群中
                            if (result == null || isBoolean(result) && result)
                            {
                                // 添加到集群中
                                groups.push(item);
                            }
                            // 返回的Promise
                            else if (result instanceof Promise)
                            {
                                result.then((res: boolean | void) =>
                                {
                                    if (res == null || isBoolean(res) && res)
                                    {
                                        // 添加到集群中
                                        groups.push(item);
                                    }

                                }).finally(() =>
                                {
                                    this.groups = this.sortGroups(groups, value);
                                });
                            }
                        }
                    });

                    // 设置集群数据
                    this.groups = groups;
                },
                immediate: true,
                deep: true
            }
        },
        // 计算属性
        computed: {
            // 生成bem风格的类名
            bemClass(): string
            {
                return bem("button-group", [
                    this.buttonLayoutDirection
                ]);
            }
        },
        // 方法
        methods: {
            // 对集群数据进行排序
            sortGroups(data: ButtonGroupInterface[], source: ButtonGroupInterface[]): ButtonGroupInterface[]
            {
                const thisButtonGroup: ButtonGroupInterface[] = [];

                source.forEach((item: ButtonGroupInterface) =>
                {
                    const itemButton = data.find((thisButton: ButtonGroupInterface) =>
                    {
                        return item.text === thisButton.text;
                    });

                    if (itemButton)
                    {
                        thisButtonGroup.push(itemButton);
                    }
                });

                return thisButtonGroup;
            },
            // 按钮点击事件
            clickHandler(argumentsList: Record<string, any>): void
            {
                const {event, index} = argumentsList || {};

                // 找到对应的按钮
                const current: ButtonGroupInterface | undefined = this.groups.find((_: ButtonGroupInterface, currentIndex: number) =>
                {
                    return currentIndex === index;
                });

                if (current && current.click)
                {
                    // 执行点击事件
                    current.click.apply(current, [{event, index}]);
                }

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <view
        :class="[customClass, bemClass]"
        :style="[
            customStyle,
            {'--custom-button-group-display-align-item': alignItems},
            {'--custom-button-group-justify-content': justifyContent}
        ]"
    >
        <!-- 遍历集群 -->
        <view
            v-for="(item, index) in groups"
            :key="index"
            class="button"
        >
            <u-button
                v-bind="item"
                :shape="item.shape ? item.shape : 'circle'"
                @click="({event}: any) => {clickHandler({event, index})}"
            />
        </view>
        <!-- //遍历集群 -->
    </view>
</template>

<style lang="scss" scoped>
    .u-button-group
    {
        display: flex;
        align-items: var(--custom-button-group-display-align-item);
        justify-content: var(--custom-button-group-justify-content);

        // 按钮
        .button
        {
            flex: 1;
        }

        // 横向布局
        &-horizontal
        {
            flex-direction: row;

            // 按钮
            .button
            {
                &:not(:first-child)
                {
                    margin-left: 10px;
                }
            }
        }

        // 纵向布局
        &-vertical
        {
            flex-direction: column;

            // 按钮
            .button
            {
                &:not(:first-child)
                {
                    margin-top: 10px;
                }
            }
        }
    }
</style>